<template>
  <el-table :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="small"
            @row-click="aloneClick">

    <el-table-column align="center" label="序号" type="index" width="50"/>

    <el-table-column align="center" label="配送模式">
      <template #default="{row}">
        {{ getLabel('distributor_mode', row.rddType) }}
      </template>
    </el-table-column>

    <el-table-column header-align="center" label="配送商" prop="distribute.distributeName"/>

    <el-table-column align="center" label="配送费">
      <template #default="{row}">
        <div v-if="row?.distribute_detail.computeMode ==='固定价格'">
          <span>{{ row?.distribute_detail?.distributePrice }}</span>
          <span v-if="unit"> 元/{{ getLabel('sell_unit', unit) }}</span>
        </div>
        <div v-else>
          <span>{{ row?.distribute_detail?.distributePrice }}%</span><span>终端价</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column align="center" label="配送服务编号" prop="distribute_detail.distributeServeNo"/>

    <el-table-column align="center" label="状态">
      <template #default="{row}">
        {{ getLabel('distribute_status', row.agentProductDisStatus) }}
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="{row}">
        <el-button v-auth="{v:['crm:marketing:matching:regional:delete'],bool:row.agentProductDisStatus === '-1'}"
                   style="color:red" type="text" @click="handlDele(row,1)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <detail-drawer ref="detailDrawer" :size-width="1000" custom-title>
    <template #title>
      <div style="display: flex;justify-content: space-between;align-items: center">
        <div style="width: 70%">
          <span style="padding-right: 15px">配送信息详情 </span>
          <el-tag size="small" type="warning">
            {{ getLabel('distribute_status', rowData.agentProductDisStatus) }}
          </el-tag>
        </div>
        <div v-if="rowData" style="width: 30%;text-align: right">
          <el-button v-auth="{v:['crm:marketing:matching:regional:delete'],bool:rowData.agentProductDisStatus === '-1'}"
                     size="small" style="color:red" type="danger" @click="handlDele(rowData,2)">
            删除
          </el-button>
        </div>
      </div>
    </template>
    <template #contents>
      <div class="drawer-content">
        <div class="history-list">
          <information-details :id="rowData?.id" ref="informationDrawer"/>
        </div>
      </div>
    </template>
  </detail-drawer>

</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from "vue";
import {useRoute, useRouter} from "vue-router";

export default {
  props: {
    unit: {
      type: String,
      default: "",
    },
  },
  components: {
    informationDetails: defineAsyncComponent(() =>
        import("./informationDetails.vue")
    ),
    associated: defineAsyncComponent(() => import("./associated.vue")),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      tableData: [],
      detailDrawer: null,
      informationDrawer: null,
      rowData: null,
    });

    const handlList = (id) => {
      api.marketingMatching.REGIONAL_DISTRIBUTION_LIST(id).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data;
        }
      });
    };

    const handlDele = (row, num) => {
      currentInstance.proxy
          .alertBox({
            message: "确认删除该终端配送信息？",
          })
          .then(() => {
            api.marketingMatching
                .REGIONAL_DISTRIBUTION_DELETE(row.id)
                .then((res) => {
                  if (res.code === 0) {
                    if (num === 1) {
                      handlList();
                    } else {
                      data.informationDrawer.handlDetails();
                    }
                  } else {
                    currentInstance.proxy.customMessage({
                      type: "error",
                      message: res.msg,
                    });
                  }
                });
          })
          .catch((err) => {
            console.log(err);
          });
    };

    const aloneClick = (row, column, event) => {
      if (column.label === "操作") {
        return;
      }
      data.rowData = row;
      data.detailDrawer.open();
    };

    const cellStyle = () => {
      return "cursor:pointer;";
    };

    onMounted(() => {
      if (route.query.id) {
        handlList(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlList,
      handlDele,
      aloneClick,
      cellStyle,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>